前言

過去在iPhone上，因為螢幕版面較小，每個 View Controller 都是用全螢幕的方式呈現，因為iPad螢幕版面較大，有些畫面如果用全螢幕方式呈現，就顯得不夠精緻，所以在iPad上就有一個浮出視窗來呈現另一個畫面，這個小視窗就是popover。

這個小視窗就是一個 View Controller，所以你原本可以呈現在手機螢幕上的畫面，也都可以"刻"在這個小視窗裡。

今天就用一個 Table View來作為範例。效果如下：

1.建立Single View App專案

2.開啟Main.storybaord，新增一個View Controller作為popover用

3.點選 popover 的 View Controller ，更改尺寸大小

在 Size 屬性面板將 「Simulated Size」改為 Freeform並且把寬高設為250 * 300。接著在 Attributes屬性面板將「Use Preferred Explicit Size」選項打勾。這時候可以看到 popover 的 View Controller被調整成250 * 300的大小。

3.在原本的 View Controller 上拖放一個Button元件

接著用右鍵拖曳藍線到 popover View Controller 的 segue ，segue 型態為 「Present As Popover」

4.開啟 ViewController.swift讓這個類別符合 UIPopoverPresentationControllerDelegate

class ViewController: UIViewController, UIPopoverPresentationControllerDelegate {

//...程式碼略

}

5.覆寫 prepare(for:sender:)的函數

override func prepare (for segue: UIStoryboardSegue, sender: Any?) {
        let popoverCtrl = segue.destination.popoverPresentationController
        
        if sender is UIButton {
            popoverCtrl?.sourceRect = (sender as! UIButton).bounds
        }
        popoverCtrl?.delegate = self
    }

6.在 popover 上實作一個 Cell 是客製化的 TableView

自定義一個 Cell Class

class TableCell: UITableViewCell {
    
    @IBOutlet weak var catImage: UIImageView!
    @IBOutlet weak var catName: UILabel!
}

ViewController.swift這個類別也要同時符合 UITableViewDelegate, UITableViewDataSource，TableView的 delegate 和 datasource則導向 popover View Controller

class ViewController: UIViewController, UIPopoverPresentationControllerDelegate, UITableViewDelegate, UITableViewDataSource {

//...程式碼略

}

遵守 UITableViewDataSource 的協定

    var catList = ["cat00", "cat01", "cat02", "cat03", "cat04", "cat05", "cat06"]

    func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return catList.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "tableCell", for: indexPath) as! TableCell
        cell.catImage.image = UIImage (named:catList[indexPath.row])
        cell.catName.text = catList[indexPath.row]
        return cell
    }

7.實作 func adaptivePresentationStyle(for controller:) 函數，並回傳.none。

原本 popover只能在iPad中呈現，回傳.none 的意思是關掉 iOS 自動判斷功能，要求 iOS 一律以 popover呈現

    func adaptivePresentationStyle(for controller: UIPresentationController, traitCollection: UITraitCollection) -> UIModalPresentationStyle {
        return .none
    }

後記

對於暫時性要點選的畫面，用這種浮動視窗既方便有美觀，不用特地要預留空間排版，個人覺得可以應用的地方很多啊～～～